<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>

    <!-- 动画库 -->

    <link rel="stylesheet" href="css/animate.min.css">

    <!-- bootstrap核心css -->

    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- 重置样式 -->

    <!-- <link rel="stylesheet" href="css/reset.less"> -->

    <link rel="stylesheet" href="css/index.css">

</head>

<body>
    <div class="content">

        <!-- left -->

        <div class="left">
            <div class="header">
                <img src="./images/kappe.png" alt="" class="pic-one">
                <img src="./images/forcreatives.png" alt="" class="pic-two">
            </div>

            <ul class="nav">
                <a href="index.html">
                    <li class="Home">Home</li>
                </a>
                <a href="work.html">
                    <li>Work</li>
                </a>
                <a href="about.html">
                    <li>About</li>
                </a>
                <a href="blog.html">
                    <li>Blog</li>
                </a>
                <a href="#">
                    <li>Services</li>
                </a>
                <a href="contact.html">
                    <li>Contact</li>
                </a>
            </ul>

            <div class="Filter">
                <p>Filter<span class="glyphicon glyphicon-th-large Filter-right"></span></p>
                <ul class="nav-bottom">
                    <a href="#" class="firt-a">
                        <li>All Works</li>
                    </a>
                    <a href="#">
                        <li>web design</li>
                    </a>
                    <a href="#">
                        <li>illustration</li>
                    </a>
                    <a href="#">
                        <li>photography</li>
                    </a>
                    <a href="#">
                        <li>wallpapers</li>
                    </a>
                    <a href="#">
                        <li>brochures</li>
                    </a>

                </ul>
            </div>

            <div class="left-bottom">
                <div class="share">
                    <img src="./images/webicon-flickr.png" alt="">
                    <img src="./images/webicon-googleplus.png" alt="">
                    <img src="./images/webicon-twitter.png" alt="">
                    <img src="./images/webicon-pinterest.png" alt="">
                    <img src="./images/webicon-dribbble.png" alt="">
                    <img src="./images/webicon-behance.png" alt="">
                    <img src="./images/webicon-facebook.png" alt="">
                </div>

                <div class="text">© 2014 Kappe, All Rights Reserved</div>

            </div>

        </div>

        <!-- right -->

        <div class="right container-fluid">
            <input type="checkbox" name="ck" id="ck">
            <label for="ck" class="right-fixed">
                <img src="./images/.png" alt="">
                <div class="circle"></div>
            </label>
            <div class="msg">
                <a href="#">
                    <p><img src="./images/phone.png" alt=""><span>9930 1234 5679</span></p>
                </a>
                <a href="#">
                    <p><img src="./images/msg.png" alt=""><span>Contact@domain.com</span></p>
                </a>
                <a href="#">
                    <p><img src="./images/home.png" alt=""><span>street address example</span></p>
                </a>
            </div>
            <div class="row">
                <div class="item">
                    <img src="./images/Layer114.png" alt="">
                    <div class="hideee">
                        <p>Cool App Design</p>
                        <p>development, mobile</p>
                        <div class="circle">
                            <span class="glyphicon glyphicon-arrow-right circle-yjt"></span>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="./images/Layer115.png" alt="">
                    <div class="hideee">
                        <p>Cool App Design</p>
                        <p>development, mobile</p>
                        <div class="circle">
                            <span class="glyphicon glyphicon-arrow-right circle-yjt"></span>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="./images/Layer114.png" alt="">
                    <div class="hideee">
                        <p>Cool App Design</p>
                        <p>development, mobile</p>
                        <div class="circle">
                            <span class="glyphicon glyphicon-arrow-right circle-yjt"></span>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="./images/Layer115.png" alt="">
                    <div class="hideee">
                        <p>Cool App Design</p>
                        <p>development, mobile</p>
                        <div class="circle">
                            <span class="glyphicon glyphicon-arrow-right circle-yjt"></span>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="./images/Layer115.png" alt="">
                    <div class="hideee">
                        <p>Cool App Design</p>
                        <p>development, mobile</p>
                        <div class="circle">
                            <span class="glyphicon glyphicon-arrow-right circle-yjt"></span>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="./images/Layer114.png" alt="">
                    <div class="hideee">
                        <p>Cool App Design</p>
                        <p>development, mobile</p>
                        <div class="circle">
                            <span class="glyphicon glyphicon-arrow-right circle-yjt"></span>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="./images/Layer115.png" alt="">
                    <div class="hideee">
                        <p>Cool App Design</p>
                        <p>development, mobile</p>
                        <div class="circle">
                            <span class="glyphicon glyphicon-arrow-right circle-yjt"></span>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="./images/Layer114.png" alt="">
                    <div class="hideee">
                        <p>Cool App Design</p>
                        <p>development, mobile</p>
                        <div class="circle">
                            <span class="glyphicon glyphicon-arrow-right circle-yjt"></span>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="./images/Layer114.png" alt="">
                    <div class="hideee">
                        <p>Cool App Design</p>
                        <p>development, mobile</p>
                        <div class="circle">
                            <span class="glyphicon glyphicon-arrow-right circle-yjt"></span>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="./images/Layer115.png" alt="">
                    <div class="hideee">
                        <p>Cool App Design</p>
                        <p>development, mobile</p>
                        <div class="circle">
                            <span class="glyphicon glyphicon-arrow-right circle-yjt"></span>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="./images/Layer114.png" alt="">
                    <div class="hideee">
                        <p>Cool App Design</p>
                        <p>development, mobile</p>
                        <div class="circle">
                            <span class="glyphicon glyphicon-arrow-right circle-yjt"></span>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="./images/Layer115.png" alt="">
                    <div class="hideee">
                        <p>Cool App Design</p>
                        <p>development, mobile</p>
                        <div class="circle">
                            <span class="glyphicon glyphicon-arrow-right circle-yjt"></span>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="./images/Layer115.png" alt="">
                    <div class="hideee">
                        <p>Cool App Design</p>
                        <p>development, mobile</p>
                        <div class="circle">
                            <span class="glyphicon glyphicon-arrow-right circle-yjt"></span>
                        </div>
                    </div>
                </div>
                <div class="item ">
                    <img src="./images/Layer114.png" alt="">
                    <div class="hideee">
                        <p>Cool App Design</p>
                        <p>development, mobile</p>
                        <div class="circle">
                            <span class="glyphicon glyphicon-arrow-right circle-yjt"></span>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="./images/Layer115.png" alt="">
                    <div class="hideee">
                        <p>Cool App Design</p>
                        <p>development, mobile</p>
                        <div class="circle">
                            <span class="glyphicon glyphicon-arrow-right circle-yjt"></span>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="./images/Layer114.png" alt="">
                    <div class="hideee">
                        <p>Cool App Design</p>
                        <p>development, mobile</p>
                        <div class="circle">
                            <span class="glyphicon glyphicon-arrow-right circle-yjt"></span>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>
</body>

</html>

<!-- jq库 -->

<script src="js/jquery-3.5.1.min.js"></script>

<!-- bootstrap核心js -->

<script src="js/bootstrap.min.js"></script>

<script>

</script>